
require(['./config'], () => {
	  require(['template', 'header', 'footer','bannerImg'], (template,header) => {
		class Detail {
		    constructor () {
				
			  // this.banner()
			this.getData().then(() => {
				this.smallImgList()
				
				// 改变数量
				this.changeNum()
				
				// 加入购物车
				this.addToCar()
			})
			
			
		  }
		  
		  banner () {
			  var mySwiper = new Swiper ('.swiper-container', {
				  loop: true, // 循环模式选项
				 
				  // 如果需要分页器
				  pagination: {
					el: '.swiper-pagination',
					// bulletElement : 'img',
					clickable :true,
					renderBullet: function (index, className) {
					// 	// 获取匹配的元素集合中的第一个元素的属性的值。 
						
					// 	this.smallImg = $('.swiper-slide').find("img")[index].src
					// 	this.smallImgSrc = $('.swiper-slide').find("img")[index].src
						
					// 	this.curImgSrc = $('.swiper-slide-active').find("img")[0].currentSrc
						
						return '<span class="' + className + '"><image src="' + this.smallImgSrc + '"></span>';
					}
				  },
				  
				  // 如果需要前进后退按钮
				  navigation: {
					nextEl: '.swiper-button-next',
					prevEl: '.swiper-button-prev',
				  },
				  
				  // 如果需要滚动条
				  scrollbar: {
					el: '.swiper-scrollbar',
				  },
				})      
		  }
		  
		  smallImgList(){
			  $('.zoom-image').elevateZoom({
			      gallery: 'gal1' // 小图容器盒子，ul的id（不加#）
			  })
		  }
		  
		  changeNum(){
			  var numInput = $('#goodsAmount')[0]
			  $('#less').on('click', () => {
				  
				  numInput.value--
				  if(numInput.value < 1){
					  numInput.value = 1 
				  }
			  })
			  $('#more').on('click', () => {
			  	  numInput.value++
			  })
			  
		  }
		  
		  getData () {
			const id = location.search.slice(4)
			return new Promise((resolve,reject) => {
				
				$.get('http://www.xiongmaoyouxuan.com/api/detail', { id }, resp => {
					
				  if (resp.code === 200) {
					console.log(resp)
					const {
					  id,
					  title,
					  price,
					  photo,
					  type,
					  saleNum,
					  couponStatus,
					  accessoryHints,
					  descContentList,
					  favoritedCount,
					  commodityTypeName,
					  tbOriginPrice,
					  shop,
					  qunTitle,
					  cname,
					  carouselList
					} = resp.data.detail
					
					this.detail = {
						id,
						title,
						price,
						photo,
						type,
						saleNum,
						couponStatus,
						accessoryHints,
						descContentList,
						favoritedCount,
						commodityTypeName,
						tbOriginPrice,
						shop,
						qunTitle,
						cname,
						carouselList
					}
					
					$('#goodsInfo').html(
					  template('goodsInfoTemplate', {...this.detail})
					)
					
					$('#design').html(
					template('designTemplate',{
						id,
						photo,
					})
					)
					$('.menuP').html(
						template('menuPTemplate', {
							id,
							title,
							cname
							
						})
					)
					
					$('.detailMore').html(
					template('detailMoreTemplate',{
						descContentList
					})
					)
					
					$('#likeUl').html(
						template('likeUlTemplate',{
							descContentList,
							carouselList,
							title,
							price,
							shop
						})
					)
					
					// 渲染结束后就可以resolve了
					resolve()
				  }
				})
			})
			
			
		  }
		
		  addToCar() {
			  // 加入购物车    $('#addCartBtn')是渲染出来的，所以直接拿是拿不到的，需要使用promise异步
			  $('#addCartBtn').on('click', () => {
				  
				  // 从localStorage取出数据, 获取到存储的数据是对象
				  let cart = localStorage.getItem('cart')
				  // 判断是否已经存储的有数据,然后存入数组（无论原本有没有存数据），为了方便下一次存数据方便
				  if(cart){
					  // 有数据了
					  cart = JSON.parse(cart)
					  
					  const isExist = cart.some(shop => {
						  return shop.id === this.detail.id
					  })
					  if(isExist){
						  // 商品存在
						  cart = cart.map(shop => {
							  if(shop.id === this.detail.id){
								  shop.count +=  Number($('#goodsAmount')[0].value)
							  }
							  return shop
						  })
						  
					  }else{
						  // 当前商品还没有被存在购物车过     --check: true 设置默认选中
						   cart.push({ ...this.detail, count: 1, check: true })  // 第一次添加多个同一商品，都显示数量为1
						   // cart.push({ ...this.detail, check: true })
					  }
					  // 不管if还是else都要存cart
					  localStorage.setItem('cart', JSON.stringify(cart))
				  }else{
					  // 原本没有数据,购物车为空
					  localStorage.setItem('cart', JSON.stringify([ {...this.detail, count:1, check: true } ]))
				  }
				  
				  // 调用header的方法计算总数量
				  header.calcCartCount()
				  
			  })
		  }
		
		
		}
    new Detail()
  })
})



